<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="50%"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row class="group-name">基本信息</el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="">
            <el-button @click="studentFlag = true">选择关联学生</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学院" prop="collegeId">
            <college-selector
              disabled
              v-model="form.collegeId"
            ></college-selector>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号" prop="studentNumber">
            <el-input
              v-model="form.studentNumber"
              placeholder="请输入学号"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="法名" prop="legalName">
            <el-input
              v-model="form.legalName"
              placeholder="请输入法名"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="studentId">
            <el-input v-model="form.name" placeholder="请输入姓名" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="原系部" prop="oldDepartment">
            <departments-selector
              disabled
              v-model="form.oldDepartment"
              :college-id="form.collegeId"
            ></departments-selector>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原专业" prop="oldMajor">
            <professions-selector
              disabled
              v-model="form.oldMajor"
              :department-id="form.oldDepartment"
            ></professions-selector>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="原班级" prop="oldClassGrade">
            <classes-from-selector
              disabled
              v-model="form.oldClassGrade"
              :profession-id="form.oldMajor"
            ></classes-from-selector>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原年级" prop="oldYearGrade">
            <el-input
              v-model="form.oldYearGrade"
              placeholder="请输入原年级"
              disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="group-name">异动信息</el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="异动类型" prop="changeType">
            <el-select v-model="form.changeType" placeholder="请选择异动类型">
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.STUDENT_CHANGE_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="异动时间" prop="changeTime">
            <el-date-picker
              clearable
              v-model="form.changeTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择异动时间"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="现系部" prop="newDepartment">
            <departments-selector
              v-model="form.newDepartment"
              :college-id="form.collegeId"
            ></departments-selector>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="现专业" prop="newMajor">
            <professions-selector
              v-model="form.newMajor"
              :department-id="form.newDepartment"
            ></professions-selector>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="现班级" prop="newClassGrade">
            <!--  @change="classesChange" -->

            <classes-from-selector
              v-model="form.newClassGrade"
              :profession-id="form.newMajor"
            ></classes-from-selector>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="现年级" prop="newYearGrade">
            <el-input v-model="form.newYearGrade" placeholder="" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-row class="group-name">审核情况</el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="审核状态" prop="checkStatus">-->
      <!--            <el-select v-model="form.checkStatus" placeholder="请选择审核状态">-->
      <!--              <el-option-->
      <!--                v-for="dict in this.getDictDatas(DICT_TYPE.CHANGE_CHECK_STATUS)"-->
      <!--                :key="dict.value"-->
      <!--                :label="dict.label"-->
      <!--                :value="parseInt(dict.value)"-->
      <!--              />-->
      <!--            </el-select>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="备注" prop="remark">-->
      <!--            <el-input-->
      <!--              v-model="form.remark"-->
      <!--              type="textarea"-->
      <!--              :rows="4"-->
      <!--              placeholder="请输入备注"-->
      <!--            />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <el-dialog
      title="学生列表"
      :visible.sync="studentFlag"
      append-to-body
      :close-on-click-modal="false"
    >
      <student-list
        @handleStudentData="getStudentData"
        v-if="studentFlag"
      ></student-list>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  createStudentChange,
  updateStudentChange,
} from "@/api/collegebase/studentChange";
import { getClasses } from "@/api/collegebase/classes";
import { getDepartments } from "@/api/collegebase/departments";
import { getProfessions } from "@/api/collegebase/professions";
import { getStudentRoll } from "@/api/collegebase/studentRoll";
import common from "@/api/collegebase/common";
import StudentList from "./studentList.vue";
import CollegeSelector from "@/components/CollegeSelector";
import DepartmentsSelector from "@/components/DepartmentsSelector";
import ProfessionsSelector from "@/components/ProfessionsSelector";
import ClassesFromSelector from "@/components/ClassesFromSelector";

export default {
  name: "StudentChangeEdit",
  components: { ClassesFromSelector, ProfessionsSelector, DepartmentsSelector, CollegeSelector, StudentList },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        studentId: [
          { required: true, message: "学生不能为空", trigger: "blur" },
        ],
        changeTime: [
          { required: true, message: "异动时间不能为空", trigger: "blur" },
        ],
        changeType: [
          { required: true, message: "异动类型不能为空", trigger: "blur" },
        ],
        newDepartment: [
          { required: true, message: "现系部不能为空", trigger: "blur" },
        ],
        newClassGrade: [
          { required: true, message: "现班级不能为空", trigger: "blur" },
        ],
        newMajor: [
          { required: true, message: "现专业不能为空", trigger: "blur" },
        ],
        newYearGrade: [
          { required: true, message: "现年级不能为空", trigger: "blur" },
        ],
      },

      //学生列表
      studentFlag: false,
    };
  },
  created() {
  },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "",
    },
  },
  watch: {
    'form.newClassGrade': {
      immediate: true,
      handler(newVal, oldVal) {
        this.form.newClassGrade = newVal;
        if (newVal) {
          this.$set(this.form, "newYearGrade", '');
          this.classesChange(newVal)
        }
      }
    },
    'form.newDepartment': {
      immediate: true,
      handler(newVal, oldVal) {
        this.form.newDepartment = newVal;
        this.$set(this.form, "newYearGrade", '');
      }
    },
    'form.newMajor': {
      immediate: true,
      handler(newVal, oldVal) {
        this.form.newMajor = newVal;
        this.$set(this.form, "newYearGrade", '');
      }
    }
  },
  methods: {
    //获取年纪
    async classesChange(id) {
      const departmentsList = await common.getClassesDetail(id);
      this.$set(this.form, "newYearGrade", departmentsList.data.classesGrade);
    },


    /** 初始化编辑的数据**/
    initData(rowData) {
      this.reset();
      if (rowData && rowData.id) {
        this.form = rowData;
        this.getStudentData({ id: rowData.studentId });
        this.form.datetimerange = [this.form.startTime, this.form.endTime];
      }
    },

    /** 取消按钮 */
    cancel() {
      this.$emit("update:show", false);
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        changeNumber: undefined,
        studentId: undefined,
        changeTime: undefined,
        changeType: undefined,
        oldMajor: undefined,
        oldDepartment: undefined,
        oldClassGrade: undefined,
        newDepartment: undefined,
        newClassGrade: undefined,
        newMajor: undefined,
        checkStatus: undefined,
        checkTime: undefined,
        orgId: undefined,
        remark: undefined,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          updateStudentChange(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.cancel();
            this.$emit("success");
          });
          return;
        }
        // 添加的提交
        // 审核状态默认为 待审核
        this.form.checkStatus = 2
        createStudentChange(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.cancel();
          this.$emit("success");
        });
      });
    },
    /**获取学生选择的数据 */
    async getStudentData(data) {
      this.studentFlag = false;
      let studentres = await getStudentRoll(data.id);
      if (studentres.data) {
        let studentData = studentres.data;
        this.$set(this.form, "studentId", studentData.id);
        this.$set(this.form, "name", studentData.studentName);
        this.$set(this.form, "studentNumber", studentData.studentNumber);
        this.$set(this.form, "legalName", studentData.legalName);
        this.$set(this.form, "collegeId", studentData.collegesId);
        this.$set(this.form, "oldYearGrade", studentData.yearGrade);
        //获取原系部信息
        let departmentsres = await getDepartments(studentData.departmentsId);
        let departmentsData = departmentsres.data;
        this.$set(this.form, "oldDepartment", departmentsData.departmentName);
        //获取原专业信息
        let professionsres = await getProfessions(studentData.professionsId);
        let professionsData = professionsres.data;
        this.$set(this.form, "oldMajor", professionsData.professionName);
        //获取原班级信息
        let classres = await getClasses(studentData.classesId);
        let classData = classres.data;
        this.$set(this.form, "oldClassGrade", classData.classesName);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.group-name {
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}
</style>
